<!-- 培训 -->

<template>
  <ContainerLayoutV2 ref="containerLayoutRef" class="training-statistics">
    <template #form>
      <el-form ref="formRef" :inline="true" :model="queryForm" class="query-form" label-width="40px">
        <UserInput v-model="queryForm.user" />
        <DeptCascader v-model="queryForm.deptIds" />
        <el-form-item label="月份">
          <el-date-picker v-model="queryForm.date" type="month" placeholder="选择月" style="width: 100px;"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleClickBtnSubmit" :icon="Search">查询</el-button>
          <el-button @click="handleClickBtnReset" :icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template #toolbar>
      <el-button plain size="small" type="primary" :icon="Plus" @click="handleClickBtnAdd">新建</el-button>
    </template>
    <template #tables ref="tableWrap">
      <el-table :data="tableData" scrollbar-always-on style="width: 100%" border :height="tableHeight" header-cell-class-name="table-header-row" empty-text="没有数据">
        <el-table-column :label="checkMonth + '月度培训计划'">
          <el-table-column label="序号" prop="id" width="70" />
          <el-table-column label="培训类别" prop="trainingCategory" width="170">
            <template #default="scope">
              <TextTeg :id="scope.row.trainingCategory" :datelist="useTrainingCategoryStore().trainingCategory" />
            </template>
          </el-table-column>
          <el-table-column label="课程名称" prop="name" width="170" />
          <el-table-column label="培训对象（部门、员工类型）" prop="deptName" width="150" />
          <el-table-column label="预计培训日期" prop="trainingDate" width="120" />
          <el-table-column label="培训课时（小时）" prop="durationTime" width="140" />
          <el-table-column label="培训地点" prop="place" width="100" />
          <el-table-column label="讲师姓名" prop="teacherName" width="100" />
          <el-table-column label="培训方式" prop="manner" width="150" />
        </el-table-column>

        <el-table-column :label="checkMonth + '月度计划实施行情况'">
          <el-table-column label="课程名称" prop="name" width="100" />
          <el-table-column label="内讲师姓名" prop="teacherName" width="100" />
          <el-table-column label="培训课时（小时）" prop="durationTime" width="140" />
          <el-table-column label="实际培训日期" width="130">
            <template #default="scope">
              {{ scope.row.actualTrainingDate || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="实际参训人数" width="120">
            <template #default="scope">
              {{ scope.row.actualJoinUser || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="培训人*时" width="100">
            <template #default="scope">
              {{ scope.row.userTime || '-' }}
            </template>
          </el-table-column>
          <el-table-column label="备注" width="300">
            <template #default="scope">
              {{ scope.row.remark || '-' }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="操作" width="190" fixed="right">
          <template #default="scope">
            <el-button link type="success" @click="handleClickBtnSave(scope.row)" size="small" :icon="Finished">实施</el-button>
            <el-button link type="primary" @click="handleClickBtnEdit(scope.row)" size="small" :icon="Edit">编辑</el-button>
            <el-button link type="danger" @click="handleClickBtnDelete(scope.row)" size="small" :icon="Delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </ContainerLayoutV2>
  <DialogTrainingEdit ref="dialogTrainingEditRef" @submited="handlerDialogSubmited" />
  <DialogTrainingActual ref="dialogTrainingActualRef" @submited="handlerDialogSubmited" />
</template>
<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import { useTrainingCategoryStore } from '../stores'
import ContainerLayoutV2 from '../layout/ContainerLayoutV2.vue'
import { Delete, Search, Refresh, Plus, Edit, Finished } from '@element-plus/icons-vue'
import UserInput from '../layout/FormTableLayout/UserInput.vue'
import DeptCascader from '../layout/FormTableLayout/DeptCascader.vue'
import DialogTrainingEdit from '../components/dialog/DialogTrainingEdit.vue'
import DialogTrainingActual from '../components/dialog/DialogTrainingActual.vue'
import api from '../api'
import TextTeg from '../components/TableParts/TextTeg.vue'
import { ElMessageBox, ElMessage } from 'element-plus'
// import * as utils from '../utils'

const containerLayoutRef = ref<InstanceType<typeof ContainerLayoutV2> | null>(null)
const dialogTrainingEditRef = ref<InstanceType<typeof DialogTrainingEdit> | null>(null)
const dialogTrainingActualRef = ref<InstanceType<typeof DialogTrainingActual> | null>(null)
const tableHeight = ref(500)
const tableData = ref<any[]>([])
const checkMonth = ref(new Date().getMonth() + 1)
const queryForm = reactive({
  user: '',
  deptIds: [] as any[] | string[],
  date: new Date(),
})
onMounted(async () => {
  // await init()
  if (containerLayoutRef.value && containerLayoutRef.value.tableContainer) {
    const tableContainer = containerLayoutRef.value.tableContainer
    tableHeight.value = tableContainer.offsetHeight
  }
})

// 资产
const getAssetList = async () => {
  if (!queryForm.date) {
    queryForm.date = new Date()
  }
  checkMonth.value = queryForm.date.getMonth() + 1

  const deptIds: any[] = []
  queryForm.deptIds.forEach((e: any) => {
    deptIds.push(e[e.length - 1])
  })
  const params = {
    pageSize: 999999,
    // trainingDate: utils.formatDate(queryForm.date, 'yyyy-MM'),
  }

  if (queryForm.user) {
    Object.assign(params, { userName: queryForm.user })
  }
  if (deptIds.length > 0) {
    Object.assign(params, { deptIds: deptIds.join(',') })
  }

  if (queryForm.date) {
    Object.assign(params, {
      yearNum: queryForm.date.getFullYear(),
      monthNum: checkMonth.value,
    })
  }

  const res = await api.Training.getList(params)
  tableData.value = res
}

const init = async () => {
  await getAssetList()
}
const handleClickBtnAdd = async () => {
  if (dialogTrainingEditRef.value) {
    dialogTrainingEditRef.value.openDialog({})
  }
}
const handleClickBtnEdit = async (item: any) => {
  if (dialogTrainingEditRef.value) {
    dialogTrainingEditRef.value.openDialog(item)
  }
}
const handleClickBtnSave = async (item: any) => {
  if (dialogTrainingActualRef.value) {
    dialogTrainingActualRef.value.openDialog(item)
  }
}

const handleClickBtnDelete = async (item: any) => {
  ElMessageBox.confirm('确定删除?', '提示')
    .then(async () => {
      const { code } = await api.Training.deleteById(item.id)
      if (code !== 200) {
      } else {
        ElMessage({
          message: `删除成功！`,
          grouping: true,
          type: 'success',
        })
      }
      handleClickBtnSubmit()
    })
    .catch(() => {})
}
const handleClickBtnSubmit = async () => {
  await init()
}
const handleClickBtnReset = async () => {
  queryForm.user = ''
  queryForm.deptIds = []
  queryForm.date = new Date()
  await init()
}

const handlerDialogSubmited = async () => {
  await handleClickBtnSubmit()
}
</script>
